<template>
    <div class="goodslistcon">
        <transition
        @before-enter="beforEnter"
        @enter='enter'
        @after-enter="afterEnter">
            <div class="ball" v-show="flag" ref="ball">        </div>
        </transition>
        <!-- 商品展示区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<img :src="src" alt="">
			    </div>
		    </div>
        </div>

        <!-- 购买区域 -->
        <div class="mui-card">
        
			<div class="mui-card-header">{{name}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>市场价：<del>{{ '￥' + price }}</del>&nbsp;&nbsp;&nbsp;销售价：<span class="red">{{'￥' + sell }}</span></p>
                        <p class="second" ref="num">购买数量： 
                        <number @change='getCount' :itemcoun="itemcount" :value="count"></number></p><br>
                        <p class="third">
                            <mt-button type='primary' size='small'>立即购买</mt-button>
                            <mt-button type='danger' size='small' @click="change">加入购物车</mt-button>
                        </p>
					</div>
				</div>
		</div>

        <!-- 参数区域 -->
        <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：000000000</p>
                        <p>库存情况：60件</p>
                        <p>上架时间：2021年1月1日</p>
					</div>
				</div>
			<div class="mui-card-footer">
                <mt-button type='primary' size='large' plain>图文介绍</mt-button>
                <mt-button type='danger' size='large' plain>商品评论</mt-button>
            </div>
		</div>

    </div>
</template>

<script>
import number from './number.vue'
export default {
    data(){
        return {
            list:[],
            src: '',
            name: '',
            sell: '',
            price: '',
            value: 0,
            flag: false,
            count: 1,
            itemcount: 60,
        }
    },
    methods:{
        change(){
            this.flag = !this.flag
            var goodsinfo = {}
            goodsinfo.name = this.name
            goodsinfo.id = this.$route.params.id
            goodsinfo.price = this.sell
            goodsinfo.count = this.count
            goodsinfo.selected = true
            this.$store.commit('addcar',goodsinfo)
        },
        beforEnter(el){
            // const po1 = this.$refs.ball.getBoundingClientRect()
            // const direc1 = this.$refs.num.getBoundingClientRect()

            // const xdi = direc1.left - po1.left
            // const ydi = direc1.top - po1.top
            // el.style.transform = `translate(${xdi}px,${ydi}px)`
            el.style.transform = 'translate(0,0)'
        },
        enter(el,done){
            el.offsetWidth;
            //小球动画优化思路
            //1. 动画结束位置被限制在某一分辨率下情况
            //2. 分辨率或滚动条一经变化，便会出现问题
            //3. 应该根据不同情况计算动态坐标值
            //4. 通过目标坐标-小球坐标得到答案   domObject.getBoundingClientRect()
            const po = this.$refs.ball.getBoundingClientRect()
            const direc = document.querySelector('#badge').getBoundingClientRect()

            const xDist = -po.left + direc.left
            const yDist = -po.top + direc.top

            el.style.transform = `translate(${xDist}px,${yDist}px)`
            el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)'
            done();
        },
        afterEnter(el){
            this.flag = !this.flag
        },
        getCount(num){
            this.count = num
        },
    },
    created(){
        this.list = JSON.parse(localStorage.getItem('goodslist') || '[]')
        this.name =this.list[this.$route.params.id].name
        this.src =this.list[this.$route.params.id].src
        this.sell =this.list[this.$route.params.id].sell
        this.price =this.list[this.$route.params.id].price
    },
    components:{
        number
    }
}
</script>

<style scoped>
.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    z-index: 99;
    position: absolute;
    top:375px;
    left: 157px;
}
.goodslistcon{
    background-color: #ccc;
}
.mui-card {
    max-width: 100%;
    position: relative;
}
img {
    display: inline-block;
    width: 100%;
}
del{
    margin: 0 5px;
}
.red {
    color: red;
    font-size: 16px;
}
input{
    margin: 0!important;
    text-align: center;
    width: 60px!important;
    padding: 10px;
    height: 33px!important;
}
.mint-button {
    display: inline-block;
    margin: 0 15px;
}
p {
    margin: 4px;
}
.mui-card-footer {
    display: block;
    padding: auto 0;
}
.mui-card-footer button {
    margin: 10px 0;
}
</style>